<template>
  <div class="coffee-card">
    <div class="img-box">
      <img :src="coffee.img" :alt="coffee.name">
      <span class="origin-tag">{{ coffee.origin }}</span>
      <button class="wish-btn"><i class="fa fa-heart-o"></i></button>
      <div class="overlay">
        <span v-for="t in coffee.tags" :key="t" class="tag">{{ t }}</span>
      </div>
    </div>

    <div class="info">
      <div class="rating">
        <i v-for="i in 5" :key="i" :class="starCls(i)" class="fa"></i>
        <span>({{ coffee.reviews }})</span>
      </div>
      <h3>{{ coffee.name }}</h3>
      <p class="desc">{{ coffee.desc }}</p>

      <div class="bottom">
        <div class="price">
          <strong>¥{{ coffee.price.toFixed(2) }}</strong>
          <s v-if="coffee.originalPrice">¥{{ coffee.originalPrice.toFixed(2) }}</s>
        </div>
        <button class="cart-btn"><i class="fa fa-shopping-cart"></i></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CoffeeCard',
  props: { coffee: Object },
  methods: {
    starCls (i) {
      const s = this.coffee.rating
      return i <= s ? 'fa-star' : (i - 0.5 <= s ? 'fa-star-half-o' : 'fa-star-o')
    }
  }
}
</script>

<style scoped>
.coffee-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:.3s}
.coffee-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}
.img-box{position:relative;}
img{width:100%;height:192px;object-fit:cover}
.origin-tag{position:absolute;top:8px;left:8px;background:#8B5A2B;color:#fff;font-size:12px;padding:4px 8px;border-radius:4px}
.wish-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(255,255,255,.8);border:none;border-radius:50%;cursor:pointer;}
.overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);padding:8px;display:flex;gap:4px;opacity:0;transition:.3s;}
.coffee-card:hover .overlay{opacity:1}
.tag{background:rgba(255,255,255,.2);color:#fff;font-size:11px;padding:2px 6px;border-radius:3px}
.info{padding:16px}
.rating{color:#8B5A2B;font-size:13px;margin-bottom:4px}
h3{font-weight:600;margin-bottom:4px}
.desc{font-size:13px;color:#555;margin-bottom:8px;line-height:1.4}
.bottom{display:flex;justify-content:space-between;align-items:center}
.price strong{color:#8B5A2B;font-size:18px}
.price s{color:#999;font-size:13px;margin-left:4px}
.cart-btn{width:36px;height:36px;border:none;background:#8B5A2B;color:#fff;border-radius:50%;cursor:pointer;}
</style>